<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #2c3e50;
			}
			#conten{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300px;
				height: 450px;
				flex-direction: column;
				background-color: #34495e;
				border-radius: 20px;
				box-shadow: 15px 15px 10px rgba(33,45,58,0.3);
				overflow: hidden;
				position: relative;
			}
			#conten form{
				width: 400px;
				height: 200px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;
				z-index: 1;
			}
			#conten form .tdx{
				width: 200px;
				height: 40px;
				outline: none;
				border: none;
				border-bottom: 1px solid;
				background: no-repeat;
				color: #fff;
			}
			#conten form .tdx::placeholder{
				color: #fff;
				font-size: 15px;
			}
			#conten form .sub{
				width: 200px;
				height: 40px;
				outline: none;
				border: 1px solid;
				border-radius: 20px;
				letter-spacing: 5px;
				color: #fff;
				background: no-repeat;
				cursor: pointer;
			}
			#conten h1{
				letter-spacing: 5px;
				font-size: 50px;
				padding-left: 5px;
				font-weight: 100;
				z-index: 1;
				text-shadow: 5px 5px 5px rgba(33,45,58,0.3);
			}
			#conten .in{
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 0;
				display: block;
				background: #3498bd;
				border-radius: 50%;
				transform: translate(-50%,-50%);
				animation: in 0.5s ease-out forwards;
			}
			
			#conten .out{
				position: absolute;
				top: 0;
				left: 0;
				width: 1200px;
				height: 1200px;
				display: block;
				background: #3498bd;
				border-radius: 50%;
				transform: translate(-50%,-50%);
				animation: out 0.5s ease-out forwards;
			}
			
			@keyframes in{
				0%{
					width: 0px;
					height: 0px;
				}
				100%{
					width: 1200px;
					height: 1200px;
				}
			}
			
			@keyframes out{
				0%{
					width: 1200px;
					height: 1200px;
				}
				100%{
					width: 0px;
					height: 0px;
				}
			}
			
		</style>
	</head>
	<body>
		<div id="conten">
			<h1>登录</h1>
			<form action="#" method="post">
				<input class="tdx" type="text" placeholder="用户名">
				<input class="tdx" type="password" placeholder="密码">
				<input class="sub" type="submit" value="登录"/>
			</form>
		</div>

<script type="text/javascript">
	const con = document.getElementById('conten')
	let isin = true;
	let isout = false;
	
	var span
	
	con.addEventListener('mouseenter',(e)=>{
		if(isin){
			let intX = e.clientX - e.target.offsetLeft
			let intY = e.clientY - e.target.offsetTop
			
			let ele = document.createElement("span")
			ele.style.left = intX + 'px'
			ele.style.top  = intY + 'px'
			con.appendChild(ele)
			
			$('#conten span').removeClass('out')
			$('#conten span').addClass('in')
			span = document.querySelector('#conten span')
			isin = false
			isout = true
			
		}
	})
	
	con.addEventListener('mouseleave',(e)=>{
		if(isout){
			let intX = e.clientX - e.target.offsetLeft
			let intY = e.clientY - e.target.offsetTop
			
			$('#conten span').removeClass('in')
			$('#conten span').addClass('out')
			$('.out').css('left',intX+'px')
			$('.out').css('top',intY+'px')
			span = document.querySelector('#conten span')
			isout = false
			
			setTimeout(()=>{
				con.removeChild(span)
				isin = true
			},500)
		}
	})
</script>
	</body>
</html>
